<template>
	<view>
		<view class="u-demo-wrap" style="flex-direction: row;justify-content: space-between;">
			<view class="u-demo-title">
				<u-avatar :src="user.avatar" size="140"></u-avatar>
			</view>
			<view class="u-demo-area u-p-t-30">
				<text class="golden-code">邀请码：{{user.id}}</text>
			</view>
			<view>
				<u-image :src="inviteQrCode" width="140" height="140" :lazy-load="false"></u-image>
			</view>
		</view>
		<!-- <u-row gutter="1" class="u-padding-30">
			<u-col span="4">
				<view class="demo-layout u-text-center">累计推广人数</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout u-text-center">推广消费金额</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout u-text-center">获得推广收益</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout u-text-center">{{summary.total}}</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout u-text-center">{{summary.consumption}}</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout u-text-center">{{summary.commission_sum}}</view>
			</u-col>
			<u-line></u-line>
		</u-row> -->
		<u-tabs ref="tabs" name="cate_name" :list="tabList" :show-bar="false" :current="tabSelected" @change="changeTab"></u-tabs>

		<view class="wrap u-p-l-30 u-p-r-30">
			<u-sticky>
				<u-row gutter="1" class="table-title">
					<u-col span="7">
						<view class="demo-layout">用户/日期</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout u-text-right">累计消费</view>
					</u-col>
				</u-row>
			</u-sticky>
			<template v-if="tabSelected===0">
				<u-row gutter="1" v-for="(usr,index) in users" class="table-row">
					<u-col span="2" class="u-padding-20 u-flex">
						<u-avatar :src="usr.avatar"></u-avatar>
					</u-col>
					<u-col span="5">
						<view class="demo-layout u-line-1">{{usr.nickname||'UID:'+usr.id}}</view>
						<view class="demo-layout u-font-xs u-line-1">{{$u.timeFormat(usr.created, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout u-line-1 u-text-right">{{usr.total_spend}}</view>
						<view class="demo-layout u-font-xs u-line-1 u-text-right" :class="{green:usr.verified==='yes'}">{{usr.verified==='yes'?'已注册':'未注册'}}</view>
					</u-col>
				</u-row>
			</template>
			<template v-if="tabSelected===1">
				<u-row gutter="1" v-for="(usr,index) in indirect_users" class="table-row">
					<u-col span="2" class="u-padding-20 u-flex">
						<u-avatar :src="usr.avatar"></u-avatar>
					</u-col>
					<u-col span="5">
						<view class="demo-layout u-line-1">{{usr.nickname||'UID:'+usr.id}}</view>
						<view class="demo-layout u-font-xs u-line-1">{{$u.timeFormat(usr.created, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout u-line-1 u-text-right">{{usr.total_spend}}</view>
						<view class="demo-layout u-font-xs u-line-1 u-text-right" :class="{green:usr.verified==='yes'}">{{usr.verified==='yes'?'已注册':'未注册'}}</view>
					</u-col>
				</u-row>
			</template>

		</view>
		<u-loadmore class="u-padding-30" :status="loadStatus" @loadmore="loadMore"
			:load-text="loadText" v-if="users.length>0"></u-loadmore>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[{
					cate_name: '直接推广用户'
				}, {
					cate_name: '间接推广用户'
				}],
				tabSelected: 0,
				scrollTop: 0,
				users: [

				],
				summary:{
					total:0,
					consumption:0,
					commission_sum:0
				},
				indirect_users: [

				],
				indirect_summary:{
					total:0,
					consumption:0,
					commission_sum:0
				},
				user:{},
				shop:{},
				inviteQrCode: '',
				paging: {
					current_page: 1,
					total_pages: 1,
					page_size: 200
				},
				indirect_paging: {
					current_page: 1,
					total_pages: 1,
					page_size: 200
				},
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if(this.tabSelected === 0){
				if (this.paging.current_page >= this.paging.total_pages) {
					this.loadStatus = 'nomore';
					return;
				}
				this.loadStatus = 'loading';
				this.paging.current_page = ++this.paging.current_page;
				this.loadMore();
			}
			if(this.tabSelected ===1 ){
				if (this.indirect_paging.current_page >= this.indirect_paging.total_pages) {
					this.loadStatus = 'nomore';
					return;
				}
				this.loadStatus = 'loading';
				this.indirect_paging.current_page = ++this.indirect_paging.current_page;
				this.loadMore();
			}
		},
		onShow() {
			this.getShop();
			this.getUserInfo();
			this.getUserInviteQrCode();
			this.getUsersList();
			this.getIndirectUsersList();
		},
		methods: {
			changeTab(index){
				this.tabSelected = index
			},
			openPage(jumpURL) {
				this.$u.route({
					type: 'to',
					params: {},
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getUserInviteQrCode() {
				this.$u.post('/user/invite-qr-code', {}).then(res => {
					if(res && res.code_url){
						this.inviteQrCode = res.code_url;
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getUsersList() {
				this.$u.post('/user/my-referred-users', this.paging).then(res => {
					if (res.page.current_page === 1) {
						this.users = res.list;
						this.summary = res.summary;
					} else {
						this.users = this.users.concat(res.list)
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
					this.tabList[0].cate_name='直接推广用户('+res.page.total_items+')'
				}).catch(e => {
					console.log(e)
				})
			},
			getIndirectUsersList() {
				this.$u.post('/user/my-indirect-referred-users', this.indirect_paging).then(res => {
					if (res.page.current_page === 1) {
						this.indirect_users = res.list;
						this.indirect_summary = res.summary;
					} else {
						this.indirect_users = this.users.concat(res.list)
					}
					this.indirect_paging.current_page = res.page.current_page;
					this.indirect_paging.total_pages = res.page.total_pages;
					this.indirect_paging.page_size = res.data.page_size;
				}).catch(e => {
					console.log(e)
				})
			},
			loadMore() {
				console.log('load more')
				if(this.tabSelected===0){
					if (this.paging.current_page <= this.paging.total_pages) {
						this.paging.current_page = this.paging.current_page + 1;
						this.getUsersList();
					}
				}
				if(this.tabSelected===1){
					if (this.indirect_paging.current_page <= this.indirect_paging.total_pages) {
						this.indirect_paging.current_page = this.indirect_paging.current_page + 1;
						this.getIndirectUsersList();
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		background: #fff;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		color: #5f6161;
	}

	.golden-code{
		font-size: 32rpx;
	}

	.green{
		color:darkgreen;
	}

	.u-demo-wrap {
		background-color: #ececec;
		padding: 20px 10px;
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.balance {
			font-size: 66rpx;
		}
	}

	.demo-layout {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.demo-layout.u-font-xs {
		padding-top: 0;
		color: #8F8F94;
	}

	.demo-layout.green{
		color: #328a44;
	}
	.demo-layout.red{
		color:red;
	}

	.table-title {
		font-weight: 400;
		border-bottom: 1px solid #DDD;
		background-color: #FFF;
		padding: 18rpx 0;
	}

	.table-row {
		border-bottom: 1px dotted #DDD;
	}
</style>
